<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getUserInfoApi } from '../api/user'
import type { UserInfo } from '../api/user'
defineProps<{ msg: string }>()
const userInfo = ref<UserInfo>({
  name: '',
  avatar: '',
  tel: '',
  email: '',
})

onMounted(() => {
  getUserInfo()
  getUserInfo()
})

const getUserInfo = async () => {
  try {
    const response = await getUserInfoApi()
    userInfo.value = response.data
  } catch (err) {
    console.error('登录失败', err) 
  }
}
</script>

<template>
  <button @click="getUserInfo">获取用户信息</button>
    <div v-if="userInfo.name">
      <img :src="userInfo.avatar" alt="头像" style="width: 100px; height: 100px;border-radius: 50%;">
      <p>{{ userInfo.name }}</p>
      <p>{{ userInfo.tel }}</p>
      <p>{{ userInfo.email }}</p>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
